<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>陕西扯面互动教学</title>
    <style>
        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background: rgba(0,0,0,0.8);
            color: white;
            border-radius: 5px;
        }
        canvas {
            border: 1px solid #ccc;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
<body>
    <div id="loading">加载资源中...</div>
    <canvas id="gameCanvas" width="1079" height="806"></canvas>

    <script>
        class GameCore {
            constructor() {
                this.canvas = document.getElementById('gameCanvas');
                this.ctx = this.canvas.getContext('2d');
                this.assets = {};
                this.menuState = "main";
                this.gamePaused = false;
                this.buttons = {};
                this.subMenuButtons = {};
                this.currentDisplayImage = null;
                this.currentDesc = null;

                // 颜色定义
                this.TEXT_COL = "#FFFFFF";
                this.TEXT_COL1 = "#0000CD";
                this.GOLD_COL = "#FFD700";
            }

            createButton(x, y, text) {
                return { x, y, text };
            }

            drawButton(button) {
                this.ctx.fillStyle = this.TEXT_COL;
                this.ctx.font = '24px Arial';
                this.ctx.fillText(button.text, button.x, button.y);
            }

            initButtons() {
                // 主菜单按钮
                this.buttons = {
                    resume: this.createButton(50, 200, "继续游戏"),
                    options: this.createButton(50, 300, "制作工艺"),
                    products: this.createButton(50, 400, "产品介绍"), // 新增产品介绍按钮
                    history: this.createButton(50, 500, "历史故事"),
                    quit: this.createButton(50, 750, "退出游戏")
                };

                // 制作工艺子菜单
                this.subMenuButtons.options = {
                    pantiao: this.createButton(50, 180, "盘面"),
                    raotiao: this.createButton(50, 260, "绕条"),
                    latiao: this.createButton(50, 340, "拉条"),
                    shanggan: this.createButton(50, 420, "上杆"),
                    xiagan: this.createButton(50, 500, "下杆"),
                    baozhuang: this.createButton(50, 580, "包装"),
                    back: this.createButton(50, 660, "返回")
                };

                // 产品介绍子菜单
                this.subMenuButtons.products = {
                    fgtp: this.createButton(50, 180, "毛细"),
                    ynm: this.createButton(50, 260, "韭叶"),
                    sft: this.createButton(50, 340, "大宽"),
                    back: this.createButton(50, 660, "返回")
                };

                // 历史子菜单
                this.subMenuButtons.history = {
                    back: this.createButton(50, 660, "返回")
                };
            }

            drawMainMenu() {
                this.ctx.drawImage(this.assets.blackground1, 0, 0);
                this.drawButtonList(this.buttons);
            }

            drawOptionsSubMenu() {
                this.ctx.drawImage(this.assets.blackground2, 0, 0);
                this.drawButtonList(this.subMenuButtons.options);
                if (this.currentDisplayImage) {
                    this.ctx.drawImage(this.currentDisplayImage, 300, 100, 600, 500);
                }
            }

            drawProductsSubMenu() {
                this.ctx.drawImage(this.assets.blackground3, 0, 0);
                this.drawButtonList(this.subMenuButtons.products);
                
                // 绘制产品图片和描述
                if (this.currentDisplayImage) {
                    const imgWidth = 400;
                    const imgHeight = 300;
                    const centerX = 300 + (600 - imgWidth)/2;
                    this.ctx.drawImage(this.currentDisplayImage, centerX, 100, imgWidth, imgHeight);
                    
                    // 绘制描述背景
                    this.ctx.fillStyle = "rgba(0,0,0,0.5)";
                    this.ctx.fillRect(200, 550, 600, 80);
                    
                    // 分割标题和内容
                    const [title, content] = this.currentDesc.split('：');
                    
                    // 绘制标题
                    this.ctx.font = '24px Arial';
                    this.ctx.fillStyle = this.GOLD_COL;
                    this.ctx.fillText(title + '：', 220, 580);
                    
                    // 绘制内容
                    this.ctx.fillStyle = this.TEXT_COL;
                    this.ctx.fillText(content, 220, 610);
                }
            }

            drawHistorySubMenu() {
                this.ctx.drawImage(this.assets.blackground3, 0, 0);
                this.drawButtonList(this.subMenuButtons.history);
                if (this.assets.historyImage) {
                    this.ctx.drawImage(this.assets.historyImage, 300, 100, 600, 500);
                }
            }

            drawButtonList(buttons) {
                Object.values(buttons).forEach(btn => this.drawButton(btn));
            }

            isPointInButton(x, y, button) {
                const textWidth = this.ctx.measureText(button.text).width;
                const textHeight = 24;
                return x >= button.x && x <= button.x + textWidth && 
                       y >= button.y - textHeight && y <= button.y;
            }

            handleClick(x, y) {
                const currentButtons = this.getCurrentButtons();
                for (const [name, button] of Object.entries(currentButtons)) {
                    if (this.isPointInButton(x, y, button)) {
                        this.handleButtonAction(name);
                        break;
                    }
                }
            }

            getCurrentButtons() {
                switch (this.menuState) {
                    case 'options': return this.subMenuButtons.options;
                    case 'products': return this.subMenuButtons.products;
                    case 'history': return this.subMenuButtons.history;
                    default: return this.buttons;
                }
            }

            handleButtonAction(buttonName) {
                const productDescs = {
                    fgtp: "毛细：细如发丝，口感劲道",
                    ynm: "韭叶：宽如韭叶，爽滑入味",
                    sft: "大宽：宽如腰带，嚼劲十足"
                };

                switch (buttonName) {
                    case 'products':
                        this.menuState = 'products';
                        this.currentDisplayImage = null;
                        this.currentDesc = null;
                        break;
                        
                    case 'fgtp':
                    case 'ynm':
                    case 'sft':
                        this.currentDisplayImage = this.assets[buttonName];
                        this.currentDesc = productDescs[buttonName];
                        break;

                    case 'options':
                        this.menuState = 'options';
                        this.currentDisplayImage = null;
                        break;

                    case 'history':
                        this.menuState = 'history';
                        break;

                    case 'back':
                        this.menuState = 'main';
                        this.currentDisplayImage = null;
                        this.currentDesc = null;
                        break;

                    // 其他原有按钮处理...
                    case 'pantiao':
                        this.currentDisplayImage = this.assets.pantiao;
                        break;
                    case 'raotiao':
                        this.currentDisplayImage = this.assets.raotiao;
                        break;
                    case 'latiao':
                        this.currentDisplayImage = this.assets.latiao;
                        break;
                    case 'shanggan':
                        this.currentDisplayImage = this.assets.shanggan;
                        break;
                    case 'xiagan':
                        this.currentDisplayImage = this.assets.xiagan;
                        break;
                    case 'baozhuang':
                        this.currentDisplayImage = this.assets.baozhuang;
                        break;
                    case 'quit':
                        window.close();
                        break;
                }
            }

            gameLoop() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

                if (this.gamePaused) {
                    switch (this.menuState) {
                        case 'main': this.drawMainMenu(); break;
                        case 'options': this.drawOptionsSubMenu(); break;
                        case 'products': this.drawProductsSubMenu(); break;
                        case 'history': this.drawHistorySubMenu(); break;
                    }
                } else {
                    this.ctx.fillStyle = this.TEXT_COL1;
                    this.ctx.font = '32px Arial';
                    this.ctx.fillText('按空格键暂停进入菜单', 343, 390);
                }
                requestAnimationFrame(() => this.gameLoop());
            }

            async loadImage(path) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.src = path;
                    img.onload = () => resolve(img);
                    img.onerror = reject;
                });
            }

            async loadAssets() {
                const assetList = [
                    { name: 'blackground1', path: 'assets/Main Cover.png' },
                    { name: 'blackground2', path: 'assets/Handmade Desktop.png' },
                    { name: 'blackground3', path: 'assets/back3.png' },
                    { name: 'pantiao', path: 'assets/pan.png' },
                    { name: 'raotiao', path: 'assets/rao.png' },
                    { name: 'latiao', path: 'assets/push.png' },
                    { name: 'shanggan', path: 'assets/up.png' },
                    { name: 'xiagan', path: 'assets/down.png' },
                    { name: 'baozhuang', path: 'assets/package.png' },
                    { name: 'historyImage', path: 'assets/history.png' },
                    // 新增产品图片
                    { name: 'fgtp', path: 'assets/fgtp.png' },
                    { name: 'ynm', path: 'assets/ynm.png' },
                    { name: 'sft', path: 'assets/sft.jpg' }
                ];

                await Promise.all(assetList.map(async (asset) => {
                    this.assets[asset.name] = await this.loadImage(asset.path);
                }));
            }

            async init() {
                await this.loadAssets();
                this.initButtons();
                this.gameLoop();
            }
        }

        const game = new GameCore();

        // 事件监听保持不变
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') game.gamePaused = !game.gamePaused;
        });

        const canvas = document.getElementById('gameCanvas');
        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            game.handleClick(e.clientX - rect.left, e.clientY - rect.top);
        });

        game.init().catch(err => {
            console.error('初始化失败:', err);
            document.getElementById('loading').innerHTML = '加载失败，请检查控制台';
        });
    </script>
</body>
</html>